<template>
    <div class="changePassword">
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人资料</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{userinfor.username}}</span>
        </el-header>
        <el-main>
            <h1 class="title">修改密码</h1>
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="原始密码 :" prop="psw">
                    <el-input type="password" v-model="ruleForm.psw" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="修改密码 :" prop="changePassword">
                    <el-input type="password" v-model="ruleForm.changePassword" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码 :" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                    <el-button @click="resetForm('ruleForm')">清空</el-button>
                </el-form-item>
            </el-form>
        </el-main>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    name: "changePassword",
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === "") {
                return callback(new Error("请输入原始密码"));
            } else {
                callback();
            }
        };
        var validatePass1 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入新的密码"));
            } else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPass");
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请再次输入确认密码"));
            } else if (value !== this.ruleForm.changePassword) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                psw: "",
                changePassword: "",
                checkPass: ""
            },
            rules: {
                psw: [
                    { validator: validatePass, trigger: "blur" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
                ],
                changePassword: [
                    { validator: validatePass1, trigger: "blur" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: "blur" },
                    { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    if (this.userinfor.password === this.ruleForm.psw) {
                        this.$message({
                            showClose: true,
                            message: "修改密码成功！",
                            type: "success"
                        });
                        this.$router.push("/home");
                    } else {
                        this.$message({
                            showClose: true,
                            message: "原始密码错误！",
                            type: "error"
                        });
                    }
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    computed: {
        ...mapState({
            userinfor: state => state.userinfo
        })
    }
};
</script>
<style scoped>
    .changePassword {
        width: 100%;
    }
    .el-header {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
    }
    .el-form {
        margin: 0 auto;
        width: 500px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 50px 50px 10px 10px;
    }
    .title {
        font-size: 30px;
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0 40px 0;
    }
</style>
